<template>
  <div class="syslog-container">
    <div class="search-section animate__animated animate__fadeInDown">
      <!-- 搜索栏 -->
      <el-input style="width: 200px" placeholder="请输入操作用户名称" v-model="username" prefix-icon="el-icon-user"></el-input>
      <el-input style="width: 200px" placeholder="请输入操作类型" v-model="type" prefix-icon="el-icon-info"></el-input>
      <el-button type="primary" @click="load" class="el-icon-search">搜索</el-button>
      <el-button type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
    </div>

    <div class="table-section animate__animated animate__fadeInUp">
      <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="username" label="操作用户" width="120"></el-table-column>
        <el-table-column prop="record" label="操作记录" min-width="200"></el-table-column>
        <el-table-column prop="type" label="操作类型" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      </el-table>

      <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import 'animate.css/animate.min.css';

export default {
  name: "SysLog",
  data(){
    return{
      pageSize:10,
      pageNum:1,
      username:'',
      type:'',
      tableData:[],
      total:0,
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      this.request.get("/sysLog/findPage",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          username:this.username,
          type:this.type
        }
      }).then(res => {
        console.log('完整响应:', res);
        if (res && res.data) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          console.error('响应数据为空:', res);
          this.tableData = [];
          this.total = 0;
        }
      }).catch(error => {
        console.error('请求错误:', error);
        this.tableData = [];
        this.total = 0;
      });
    },
    getRowClass({rowIndex,columnIndex}){
      if(rowIndex === 0){
        return 'background:#ccc'
      }
    },
    reset(){
      this.username = '';
      this.type = '';
      this.load();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
    },
  }
}
</script>

<style scoped>
.syslog-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.el-table {
  margin-top: 15px;
}

.el-input {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .search-section {
    padding: 15px;
    flex-direction: column;
    align-items: stretch;
  }
  
  .el-input {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  
  .el-button {
    margin-left: 0 !important;
    margin-bottom: 10px;
  }

  .block {
    margin-left: 0 !important;
  }
}
</style>